<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.min.js"></script>

  <script>


    new Promise((resolve, reject) => { // 执行器函数  ==> 在其内部执行异步任务
      // 启动异步任务的执行

      // 如果异步任务成功了, 调用resolve来将promise的状态改变成功的

      // 如果异步任务失败了, 调用reject来将promise的状态改变失败的
    })


   /*  const p = new Promise((resolve) => {
      // 立即发送请求
      xhr.onReadyStateChange = () => {
        if (xhr.readState===4) {
          resolve(xhr.responseText)
        }
      }
      xhr.send()  // 需要2s请求才完成

       
      // 会让指定回调函数发生在发送请求前
      // setTimeout(() => {
      //   xhr.send()
      // }, 100) 
    })

    p.then((value) => {  // 是在请求发出后, 响应返回前指定回调
        // 可以得到异步的结果数据
    })

    setTimeout(() => {
      p.then((value) => {  // 是在请求响应返回后的指定回调
        // 可以得到异步的结果数据
      })
    }, 2100) */



    
    /* 
    .then()返回的promise的结果状态由什么决定?
      简单说: 由.then()指定并执行的回调函数的执行结果决定
      详细说: 
        抛出错误: promise失败, 失败的reason是3
        返回一个失败的promise: promise失败, 失败的reason就是返回的promise的reason
        返回一个成功的promise: promise成功, 成功的value就是返回的promise的value
        返回一个非promise值: promise成功, 成功的value就是返回的值
    */
   /*  new Promise((resolve, reject) => { // 执行器
      // resolve(1)
      reject(2)
    }).then(
      value => {
        console.log('onResolved1', value)
      },
      reason => {
        console.log('onRejected1', reason)
        // throw 3  // promise失败, 失败的reason是3

        // return Promise.reject(4) // promise失败, 失败的reason就是返回的promise的reason

        // return Promise.resolve(5) // promise成功, 成功的value就是返回的promise的value

        // return 6 // promise成功, 成功的value就是返回的值
      }
    ).then(
      value => {
        console.log('onResolved2', value)
      },
      reason => {
        console.log('onRejected2', reason)
      }
    )
 */









    // new Promise((resolve, reject) => {
    //   // resolve(1)
    //   reject(2)
    // }).then(
    //   value => {
    //     console.log('onResolved1', value)
    //   },   // onResolved
    //   reason => {
    //     console.log('onRejected1', reason)
    //     // 抛出错误
    //     // throw 3

    //     // 返回一个失败的promise
    //     // return Promise.reject(4)

    //     // 返回一个成功的promise
    //     // return Promise.resolve(5)

    //     // 返回其它任意值
    //     // return 6

    //     Promise.reject(4)

    //   } // onRejected
    // ).then(
    //   value => {
    //     console.log('onResolved2', value)
    //   },   
    //   reason => {
    //     console.log('onRejected2', reason)
    //   }
    // )



    /* 
    Promise.all()
    */
   /*  function ajax(url) {
      return axios.get(url)
    }
    const p1 = ajax(url1)
    const p2 = ajax(url2)
    const p3 = ajax(url3)
    Promise.all([p1, p2, p3])
      .then(values => {
        return ajax(url4)  // 一定要返回
      })
      .then(value => {
        console.log(value) // 就是第4个请求成功的value
      })
      .catch(error => {

      }) */

    /* 
    1. 哪里用await: 一般在结果为promise的表达式左侧
        如果await 右侧表达式结果不是promise, 直接得到这个结果
    2. 如果用async: 离await最近的函数定义的左侧

    成功的value: await左侧以级下面的代码都是在成功之后执行(相当于在成功的回调中执行)
    失败的reason: 使用try...catch中在失败后执行(相当于在失败的回调中执行)

    调用async函数的得到是一个promise对象, promise的结果由aysnc函数体执行的结果决定(与.then类似)
     */

    function ajax(url) {
      return axios.get(url)
    }

    /* 
    async函数执行返回一个promise
    promse的状态由 async函数体执行的结果 决定
    */
    async function getProduct() {
      // 如果await的右侧表达式的结果不是promise, 直接立即返回这个表达式的值
      const value = await {} 
      console.log('value', value)

      try {
        // 如果await的右侧表达式的结果是promise, 那左侧得到的就是promise异步成功的value
        const response = await ajax('/1_js基础/product2.json')  
        console.log(response.data)
        // return undefined
        return response.data
      } catch (error) {
        console.log('请求失败', error.message)
        // throw error.message
        return Promise.reject(error.message)
      }
    }

    function getProduct() {
      return ajax('/1_js基础/product.json').then(
        response => {
          console.log(response.data)
          return response.data
        }
      ).catch( error => {
        console.log('请求失败2', error.message)
        throw error
      })
    }


    function test() {
      const p = getProduct()
      console.log('-------') // 这个输出是什么时候
      p.then(
        value => {
          console.log('---', value)
        },
        error => {
          console.log(error)
        }
      )
    }
    test() 

    /* function getProduct2() {
      return new Promise((resolve, reject) => {
        ajax('/1_js基础/product.json').then(
          response => {
            console.log(response.data)
            resolve(response.data)
          },
          error => {
            console.log('请求失败', error.message)
            reject(error.message)
          }
        )
      })
    } */

    

  </script>
</body>
</html>